<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {

            // 全选
            var selectAllObj = document.getElementById("selectAll");

            // 全选事件
            selectAllObj.onclick = function() {
                var cbArrsObj = document.getElementsByName("myCheck");
                for (var i = 0; i < cbArrsObj.length; i++) {
                    // 下面所有的复选框的状态全选的状态,可以通过全选的状态来去决定下面所有checkbox的状态。
                    cbArrsObj[i].checked = selectAllObj.checked;
                }
            }

            var cbArrs = document.getElementsByName("myCheck");
            for (var i = 0; i < cbArrs.length; i++) {
                var count = 0;
                cbArrs[i].onclick = function() {
                    if (this.checked) {
                        count++;
                    }
                    if (count == cbArrs.length) {
                        selectAllObj.checked = "checked";
                    }
                }
            }
        }
    </script>
</head>

<body>

    全选:<input id="selectAll" type="checkbox" /><br/> 游泳: <input type="checkbox" name="myCheck" /><br /> 吃饭: <input type="checkbox" name="myCheck" /><br /> 睡觉: <input type="checkbox" name="myCheck" /><br /> 跳舞: <input type="checkbox" name="myCheck" /><br
    />

</body>

</html>